<template>
  <div id="app">

      <van-search
        placeholder="商品搜索,共239款好物"
        input-align="center"
        @touchstart="touchsearch"
      />
    <div class="header">
        <van-sidebar v-model="activeKey">
            <van-sidebar-item v-for="item in list" :key="item.id" :title="item.name" @click="change(item.id)" />
        </van-sidebar>

        <ul class="header2">
            <li v-for="item in list2" :key="item.id">
                <img class="banner" :src="item.banner_url" alt=""> <br>
                <div> <span></span><p class="header-p1">{{item.name}}分类</p><span></span> </div>
                
                <ul class="header3">
                    <router-link :to="`/category/${arr.id}`" tag="li" v-for="arr in item.subList" :key="arr.id">
                        <img :src="arr.wap_banner_url" alt="">
                        <p>{{arr.name}}</p>
                    </router-link>
                </ul>
            </li>
        </ul>
    </div>

  </div>
</template>

<script type="text/javascript">
import { category } from "@/api/category/index";
import { currentaction } from "@/api/category/currentaction/index";

export default {
  data() {
    return {
         openId:localStorage.getItem('openId'),
         list:[],
         list2:[],
         activeKey:0,
    }
  },
  methods: {
      change(id){
          currentaction({id}).then(res=>{
              this.list2 = res.data;
            //   console.log(this.list2);
          })
      },

      touchsearch(){
      this.$router.push({path: '/home/touchsearch'});
    }
  },
  computed: {

  },
  components: {

  },
  async created() {
      //获取导航栏数据
      var res = await category();
      this.list = res.categoryList;
      //获取导航栏下详情数据
    //   console.log(res);
      var result = await currentaction({
          id:this.list[0].id
      })
      this.list2 = result.data;
    //   console.log(this.list2);


    //   category({
    //       openId: this.openId
    //   }).then(res=>{
    //     //   console.log(res.categoryList);
    //       this.list = res.categoryList;
    //       console.log(this.list);
    //   })
  },
  mounted() {

  },
}
</script>

<style scoped lang="scss">
.header{
    display: flex;
}
.header2{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    .banner{
        width: 263px;
        height: 111px;
    }
    img{
        width: 80px;
        margin: 0 10px;
        // height: 100px;
    }
    div{
        height: 66px;
    }
    .header-p1{
        line-height: 66px;
        display: inline-block;
        margin: 5px 5px 0 5px;
    }
    span{
        display: inline-block;
        width: 12px;
        height: 1px;
        background-color: #999;
        margin-bottom: 4px;
    }
}
.header3{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-bottom: 50px;
    p{
        margin: 0;
    }
}
</style>
